<!--
 * @Author: g05047
 * @Date: 2023-04-13 11:07:01
 * @LastEditors: g05047
 * @LastEditTime: 2023-04-17 09:53:54
 * @Description: file content
-->
<template>
  <div class="content">
    <div>
      <el-card>
        <el-row :gutter="30" type="flex">
          <el-col style="width: 370px">
            <div>
              <h3 style="margin-top: 0">{{ cameraTittle }} 监控摄像头列表</h3>
            </div>
            <div class="camera-content" v-if="currentCameraList.length !== 0">
              <div
                class="camera-item-container"
                v-for="(item, index) in currentCameraList"
                :key="index"
                @click="handleClickCamera(item, index)"
              >
                <div class="camera-item">
                  <i class="el-icon-video-play"></i>
                </div>
                {{ "画面" + (Number(index) + 1) }}
              </div>
            </div>
            <el-empty v-else description="暂无数据"></el-empty>
          </el-col>
          <el-col>
            <div class="video-content">
              <VideoComponent
                v-if="showVideoComponent"
                ref="videoComponent"
                :cameraTittle="cameraTittle"
                :currentCameraTitle="currentCameraTitle"
              >
              </VideoComponent>
              <div class="notOnline" v-if="isShowNotOnline">
                <i class="el-icon-circle-close"></i>
                <span class="text">该监控点不在线</span>
              </div>
            </div>
            
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getTreeList ,getCameraStatus} from "@/api/cadre.js";
import VideoComponent from "../components/videoComponent.vue";

export default {
  components: { VideoComponent }, //组件
  data() {
    return {
      filterText: "",
      treeData: [],
      defaultProps: {
        // children: "children",
        // label: "label",
        label: "name",
      },
      cameraTittle: "",
      currentCameraTitle: "",
      currentCameraList: [],
      showVideoComponent: true,

      licenseNo: "",

      timer: null,
      isShowNotOnline:false,
    };
  },
  //页面加载
  created() {
    this.licenseNo = sessionStorage.getItem("newLicenseNo") || "";
    if(process.env.VUE_APP_TYPE=='zjg'){
    this.getTreeListAsync();
    }
  }, // 页面加载完成
  mounted() {}, //实例销毁之前
  beforeDestroy() {}, //实例销毁后
  destroyed() {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    handleClickCamera(item, index) {
      this.getCameraStatusAsync(item.indexCode)
      this.currentCameraTitle = "画面" + (Number(index) + 1);
      this.$nextTick(() => {
        this.$refs.videoComponent.getPreviewURLs(item.indexCode);

      });
    },

    async getTreeListAsync() {
      try {
        const res = await getTreeList({
          newlicenseno: sessionStorage.getItem("newLicenseNo") || "",
        });

        this.currentCameraList = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    //获取摄像头状态
    async getCameraStatusAsync(cameraIndexCode) {
      try {
        const res = await getCameraStatus({ cameraIndexCode: cameraIndexCode });
        if (res.code === "0" && res.data.status === 1) {
          this.isShowNotOnline = false;
        } else {
          this.$message.info("摄像头不在线!");
          this.isShowNotOnline = true;
        }
      } catch (err) {
        console.log(err);
      }
    },
  }, //方法
  computed: {}, //计算属性
};
</script>
<style lang="scss" scoped>
.tree-content {
  margin-top: 10px;
  height: 500px;
  overflow: scroll;
}

.camera-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-gap: 10px;
  margin-bottom: 20px;
}

.camera-item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.camera-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 80px;
  border: solid 1px #ebeef5;
  border-radius: 5px;
  margin-bottom: 5px;
  i {
    font-size: 45px;
    color: #c1c1c1;
  }
}
.camera-item:hover {
  cursor: pointer;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  i {
    color: #42a5f5;
  }
}
.notOnline {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 200px;
  left: 56%;
  .text {
    color: #c1c1c1;
  }
  .el-icon-circle-close {
    color: red;
    font-size: 50px;
  }
}



</style>
